import MyComponent from "../classes/MyComponent.js";
import {generateElement, trans10to16} from "../functions/common.js";
import {PageDetail} from "./Process.js";

export class MyStorage extends MyComponent {
    constructor(size) {
        super();
        this.elem = generateElement({
            type: "div",
            height: "400px",
            width: "160px",
            border: "1px solid #c2c2c2",
            overflow: "hidden",
            backgroundColor: "#f2f2f2",
            margin: "5px 5px"
        });
        this.elem.innerHTML = "<div id=\"blockContainer\" style=\"margin: 5px 5px\"></div>\n";
        this.size = size ? size : 32;
        this.dataArray = [];
    }

    init(size) {
        this.size = size ? size : 16;
        this.blockContainer = document.getElementById("blockContainer");
        for (let i = 0; i < this.size; i++) {
            let tmp = generateElement({
                type: "div",
                margin: "5px 5px",
                backgroundColor: "#5FB878",
                height: "24px",
                lineHeight: "24px",
                border: "none",
                innerText: trans10to16(i),
                padding: "0 5px"
            });
            this.blockContainer.appendChild(tmp);
            this.dataArray[i] = {data: null, elem: tmp, isFree: true, mark: trans10to16(i)};
        }
    }


    update(details) {
        if (details && details instanceof PageDetail){
            let data = details.detail;
            for (let i = 0;i<this.size;i++){
                let elem = this.dataArray[i].elem;
                if (data[i] && data[i]!==null){
                    elem.style.backgroundColor = "#FF5722";
                    elem.innerText = this.dataArray[i].mark + " - " + data[i];
                }else {
                    elem.style.backgroundColor = "#5FB878";
                    elem.innerText = trans10to16(i);
                }
            }
        }
    }


    writeData(address, content, callBack) {
        this.dataArray[address].data = content;
        this.dataArray[address].isFree = false;
        this.dataArray[address].elem.style.backgroundColor = "#FF5722";
        try {
            anime({
                targets: this.dataArray[address].elem,
                rotateX: "+=360deg",
                complete: (anim) => {
                    this.dataArray[address].elem.innerText = this.dataArray[address].mark + " - " + this.dataArray[address].data;
                    if (callBack){callBack();}
                }
            })
        }catch (e) {
            console.log(e);
        }
    }

    readData(address) {
        return this.dataArray[address].data;
    }

    withdrawData(address) {
        this.dataArray[address].elem.style.backgroundColor = "#5FB878";
        this.dataArray[address].isFree = true;
    }

    getElementByAddress(address) {
        return this.dataArray[address].elem;
    }

    isBlank(address) {
        return this.dataArray[address].isFree;
    }

    animeMoveFind(address, callBack) {
        try {
            anime({
                targets: this.blockContainer,
                translateY: -29 * address,
                easing: 'easeInOutQuad',
                duration: 800,
                complete: ()=>{
                    if (callBack){callBack();}
                }
            });
        } catch (e) {
            console.log("Error:MyStorage.animeMoveFind", e)
        }
    }
}
